import React from "react";
import {NFTIMAGE} from "@/utility/imageProcess";
import {Image, Space} from "antd";
import './index.less'
import {ZoomInOutlined, ZoomOutOutlined} from "@ant-design/icons";

export default function NFT(p: NFTIMAGE & any) {

    return <div key={p.id} className='boxother'>
        <Image className='img' src={p.url}
               preview={{
                   toolbarRender: (
                       _,
                       {
                           transform: {scale},
                           actions: {onZoomOut, onZoomIn},
                       },
                   ) => (
                       <Space size={6} className="toolbar-wrapper">
                           <ZoomOutOutlined disabled={scale === 1} onClick={onZoomOut}/>
                           <ZoomInOutlined disabled={scale === 10} onClick={onZoomIn}/>
                       </Space>
                   ),
               }}
        />
        <p className='name'>{p.name}</p>
        {p.children}
    </div>
}